<template>
  <view class="page-container" v-if="transaction">
    <uni-card title="基础信息" :is-shadow="true">
      <view class="detail-item">
        <text class="label">交易流水号:</text>
        <text class="value">{{ transaction.transaction_id }}</text>
      </view>
      <view class="detail-item">
        <text class="label">关联订单号:</text>
        <text class="value">{{ transaction.order_no || 'N/A' }}</text>
      </view>
      <view class="detail-item">
        <text class="label">交易类型:</text>
        <uni-tag :text="getTransactionTypeText(transaction.type)" :type="getTransactionTypeTag(transaction.type)" />
      </view>
      <view class="detail-item">
        <text class="label">交易状态:</text>
        <uni-tag :text="getTransactionStatusText(transaction.status)" :type="getTransactionStatusTag(transaction.status)" />
      </view>
      <view class="detail-item">
        <text class="label">交易时间:</text>
        <text class="value">{{ formatTime(transaction.created_at) }}</text>
      </view>
    </uni-card>

    <uni-card title="金额信息" :is-shadow="true">
      <view class="detail-item">
        <text class="label">交易金额:</text>
        <text class="amount">¥{{ (transaction.amount / 100).toFixed(2) }}</text>
      </view>
      <view class="detail-item">
        <text class="label">支付方式:</text>
        <text class="value">{{ getPaymentMethodText(transaction.payment_method) }}</text>
      </view>
    </uni-card>

    <uni-card title="关联信息" :is-shadow="true" v-if="transaction.order">
      <view class="detail-item">
        <text class="label">会员:</text>
        <text class="value">{{ transaction.order.member?.username || 'N/A' }}</text>
      </view>
      <view class="detail-item">
        <text class="label">门店:</text>
        <text class="value">{{ transaction.order.store?.name || 'N/A' }}</text>
      </view>
      <view class="detail-item">
        <text class="label">场地:</text>
        <text class="value">{{ transaction.order.venue?.name || 'N/A' }}</text>
      </view>
    </uni-card>
  </view>
  <view v-else class="loading-container">
    <uni-load-more status="loading"></uni-load-more>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { fetchTransactionDetail } from '@/api/finance';
import type { Transaction } from '@/types/finance';
import { getTransactionTypeText, getTransactionTypeTag, getTransactionStatusText, getTransactionStatusTag, getPaymentMethodText } from '@/utils/finance';
import moment from 'moment';

const transaction = ref<Transaction | null>(null);

const getTransaction = async (id: number) => {
  try {
    const res = await fetchTransactionDetail(id);
    transaction.value = res;
  } catch (error) {
    console.error('获取交易详情失败:', error);
    uni.showToast({ title: '加载失败', icon: 'none' });
  }
};

const formatTime = (timestamp: number) => {
  return moment(timestamp * 1000).format('YYYY-MM-DD HH:mm:ss');
};

onLoad((options: any) => {
  if (options.id) {
    getTransaction(Number(options.id));
  }
});
</script>

<style lang="scss" scoped>
.page-container {
  padding: 10px;
  background-color: var(--background-color);
  min-height: 100vh;
}

.uni-card {
  margin: 0 0 10px 0 !important;
}

.detail-item {
  display: flex;
  align-items: center;
  font-size: 14px;
  margin-bottom: 12px;
  color: var(--text-color-primary);

  .label {
    font-weight: bold;
    width: 90px;
    color: var(--text-color-secondary);
  }
  
  .value {
    flex: 1;
  }
  
  .amount {
    color: var(--error-color);
    font-weight: bold;
    font-size: 16px;
  }
}

.loading-container {
  padding-top: 100px;
}
</style>